import styles from './index.module.scss'
import Image from '@c/image'
import Link from 'next/link'
import cm from 'classnames'

const Index = props => {
  const { data, actor } = props
  // 数据为空则渲染null
  if (!data || !data.length) return null
  return (
    <div className={styles.list}>
      <div className={cm('items', styles.items, 'scrollBeautify')}>
        {data.map((item, index) => {
          if (!index) {
            return (
              <Link href={`/person/${actor.id}`} key={index} className={cm('item', styles.item, styles.phone)}>
                <Image className={styles.bg} src={actor.avatar} alt={actor.name} />
                <div href={`/person/${actor.id}`} className={styles.actorDetail}>
                  <p className={styles.p}>{actor.name}的更多详情</p>
                  <img loading="lazy" src="/images/toActor.png" alt="演员详情" />
                </div>
              </Link>
            )
          }
          let labelStr = item.label
          try {
            labelStr = JSON.parse(item.label).join(',')
          } catch (error) {}
          return (
            <figure key={index} className={cm('item', styles.item)}>
              <Image className={styles.bg} src={item.img || item.picurl} alt={item.name || '详情海报'} />
              <Link href={`/vod/detail/${item.id}`} className={styles.detail}>
                <div className={cm(styles.bottomDetail, 'hideWhenPhone')}>
                  <div className="flex" style={{ marginBottom: 10 }}>
                    {item.tmdbScore ? (
                      <div className={styles.mark}>
                        <img loading="lazy" src="/images/tmdb.png" alt="tmdb" className={styles.tmdb} />
                        <span>{('' + item.tmdbScore).toFix(1)}</span>
                      </div>
                    ) : null}
                    {item.doubanScore ? (
                      <div className={styles.mark}>
                        <img loading="lazy" src="/images/douban.png" alt="douban" className={styles.douban} />
                        <span>{('' + item.doubanScore).toFix(1)}</span>
                      </div>
                    ) : null}
                  </div>
                  <p className={cm(styles.name, 'textEllipsis')}>{item.name}</p>
                  <div className={styles.type}>
                    <div className={styles.typeInfo}>
                      <p className="w-full textEllipsis">{labelStr || '暂无分类信息'}</p>
                      <p className={styles.countStr}>
                        <span>{item.time || '暂无上映日期'}</span>
                        <span>{item.countStr}</span>
                      </p>
                    </div>
                  </div>
                  <p className={styles.desc}>{item.desc || '暂无剧情简介信息'}</p>
                </div>
                <div className={cm(styles.detailPhone, 'hideWhenPc')}>
                  <div className="flex mb-1">
                    {item.tmdbScore ? (
                      <div className={styles.mark}>
                        <img loading="lazy" src="/images/tmdb.png" alt="tmdb" className={styles.tmdb} />
                        <span>{('' + item.tmdbScore).toFix(1)}</span>
                      </div>
                    ) : null}
                    {item.doubanScore ? (
                      <div className={styles.mark}>
                        <img loading="lazy" src="/images/douban.png" alt="douban" className={styles.douban} />
                        <span>{('' + item.doubanScore).toFix(1)}</span>
                      </div>
                    ) : null}
                  </div>
                  <p className={cm(styles.name, 'textEllipsis')}>{item.name}</p>
                </div>
              </Link>
            </figure>
          )
        })}
      </div>
    </div>
  )
}

export default Index
